---
title: Heading
description: Used to render semantic HTML heading elements.
---

<ExampleTabs name="heading-basic" />

## Usage

```js
import { Heading } from '@saas-ui/react'
```

```jsx
<Heading>I'm a Heading</Heading>
```

## Examples

### Sizes

Use the `size` prop to change the size of the heading component.

<ExampleTabs name="heading-with-sizes" />

<ExampleTabs name="heading-with-multi-line" />

### Highlight

Compose the `Heading` component with the `Highlight` component to highlight
text.

<ExampleTabs name="heading-with-highlight" />

### As another element

Use the `as` prop to render the heading as another HTML element.

<ExampleTabs name="heading-with-as-prop" />

### Weights

Use the `fontWeight` prop to change the weight of the heading component.

<ExampleTabs name="heading-with-weights" />

### Composition

Use the `Heading` component to compose other components.

<ExampleTabs name="heading-with-composition" />

## Props

<PropTable component="Heading" part="Heading" />
